<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>WebSocket 测试</title>
    <style>
        body {
            font-family: "Segoe UI", Arial, sans-serif;
            background: #f4f6fa;
            margin: 0;
            padding: 40px;
        }
        h2 {
            color: #2d8cf0;
        }
        label, input, button {
            font-size: 16px;
        }
        #sid, #msg {
            padding: 6px 10px;
            border: 1px solid #bfcbd9;
            border-radius: 4px;
            margin-right: 8px;
        }
        button {
            background: #2d8cf0;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 7px 18px;
            margin-right: 8px;
            cursor: pointer;
            transition: background 0.2s;
        }
        button:hover {
            background: #1a73e8;
        }
        #log {
            width: 100%;
            max-width: 800px;
            min-height: 300px;
            border: 1px solid #bfcbd9;
            border-radius: 4px;
            background: #fff;
            color: #333;
            padding: 16px 10px 10px 10px;
            margin-bottom: 12px;
            font-size: 15px;
            line-height: 1.5;
            overflow-y: auto;
            box-sizing: border-box;
        }
        .msg {
            margin-bottom: 10px;
            display: flex;
        }
        .msg.me {
            justify-content: flex-end;
        }
        .bubble {
            max-width: 70%;
            padding: 8px 14px;
            border-radius: 18px;
            background: #e6f7ff;
            color: #222;
            word-break: break-all;
            box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        }
        .msg.me .bubble {
            background: #2d8cf0;
            color: #fff;
        }
        #msg {
            width: 60%;
            max-width: 400px;
        }
        .controls {
            margin-bottom: 18px;
        }
    </style>
</head>
<body>
<h2>WebSocket 测试页面</h2>
<div class="controls">
    <label>SID: <input id="sid" value="test1"></label>
    <button onclick="connect()">连接</button>
    <button onclick="disconnect()">断开</button>
</div>
<div id="log"></div>
<input id="msg" placeholder="输入消息">
<button onclick="sendMsg()">发送</button>

<audio id="notifySound" src="https://cdn.pixabay.com/audio/2022/07/26/audio_124bfa1c7b.mp3" preload="auto"></audio>

<script>
    let ws = null;
    let mySid = document.getElementById('sid').value;

    function log(msg, isMe = false) {
        const logDiv = document.getElementById('log');
        const msgDiv = document.createElement('div');
        msgDiv.className = 'msg' + (isMe ? ' me' : '');
        const bubble = document.createElement('div');
        bubble.className = 'bubble';
        bubble.textContent = msg;
        msgDiv.appendChild(bubble);
        logDiv.appendChild(msgDiv);
        logDiv.scrollTop = logDiv.scrollHeight;
    }

    function connect() {
        mySid = document.getElementById('sid').value;
        ws = new WebSocket('ws://' + location.host + '/ws/' + mySid);
        ws.onopen = () => log('已连接');
        ws.onmessage = e => {
            // 判断是否自己发的
            let isMe = false;
            if (e.data.includes('[' + mySid + ']')) {
                isMe = true;
            }
            log(e.data, isMe);
            document.getElementById('notifySound').play();
        };
        ws.onclose = () => log('连接已关闭');
        ws.onerror = e => log('发生错误');
    }

    function sendMsg() {
        const msg = document.getElementById('msg').value;
        if (ws && ws.readyState === 1) {
            ws.send(msg);
            // 不在这里 log，等服务端回显
            document.getElementById('msg').value = '';
        } else {
            log('未连接');
        }
    }

    function disconnect() {
        if (ws) ws.close();
    }
</script>
</body>
</html>